<!--
两者区别：
    一个着重顺序
        :nth-child(n)       第n个
        第几个娃，不分是谁的（多个时，才分是谁的）
    一个着重类型
        :nth-of-type(n)     指定类型的第n个
        是谁的娃，对于别人的娃就不关心了
        例如：只关心div，其它的span、p等就不会去理会了

1）相同点
    关于n的用法是一样的：数字、关键字、公式

2）不同点
child
    单个选择时，不会区别类型编号
            标签:nth-child(4)
            标签:first-child
        所有子元素一视同仁，不区别标签类型，按上到下顺序，索引号从1开始编号
        先编号、后类型：先一视同仁的编号，然后指定编号，最后根据指定编号判断类型
            div  11111
            div  22222
            span 33333
            span 44444
            div  55555
            div  66666
            p    77777
            p    88888
    多个选择时，会区别类型编号
            div  11111
            div  22222
            span 11111
            span 22222
            div  33333
            div  44444
            p    11111
            p    22222

type
    不管单选、还是多选，都会区分类型编号
        子元素会区别标签类型，根据不同类型分类，按上到下顺序，索引号重新从1开始编号
        先类型、后编号：先分类编号，然后指定类型，最后根据指定类型获取对应编号
            div  11111
            div  22222
            div  33333
            span 11111
            span 22222
            div  44444
            div  55555
            p    11111
            p    22222

单个的时候，有区别
    :first-child    VS   :first-of-type
    :nth-child(4)   VS   :nth-of-type(4)
多个的时候，无区别
    :nth-child(odd)  VS  :nth-of-type(odd)
    :nth-child(2n)   VS  :nth-of-type(2n)
-->
<style>
  /* ----------------- 有区别 --------------------- */
  /* 索引1对应的类型是div，不是要找的【1对应的p】，故选取失败 */
  section p:first-child {
    color: red;
  }
  /* 类型p对应的索引是1，是要找的【p对应的1】，可以选取成功 */
  section p:first-of-type {
    color: blue;
  }

  /* ----------------- 有区别 --------------------- */
  /* 索引4对应的类型是span，不是要找的【4对应的div】，故选取失败 */
  section div:nth-child(4) {
    background-color: skyblue;
  }
  /* 类型div对应的索引是4，是要找的【div对应的4】，可以选取成功 */
  section div:nth-of-type(4) {
    background-color: cyan;
  }

  /* ----------------- 无区别 --------------------- */
  section div:nth-child(odd) {
    border-top: 5px solid purple;
  }
  section div:nth-of-type(odd) {
    border-left: 5px solid orange;
  }
</style>

<section>
  <div>标签div1</div>
  <div>标签div2</div>
  <div>标签div3</div>
  <span>标签span1</span>
  <span>标签span2</span>
  <div>标签div4</div>
  <div>标签div5</div>
  <p>标签p1</p>
  <p>标签p2</p>
  <div>标签div6</div>
  <div>标签div7</div>
  <div>标签div8</div>
  <div>标签div9</div>
  <div>标签div10</div>
</section>
